<template>
	<view class="content">
		<view class="code">
			<image :src="infor.service_wx_qrcode" mode=""></image>
		</view>
		<view class="infor">
			<view class="title">如何聯繫客服</view>
			<view class="one-infor">
				1、長按頁面二維碼，添加客服微信
			</view>
			<view class="one-infor">
				<view>2、一鍵撥打客服電話</view>
				<view class="btn" @click="callPhone">立即撥打</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getServiceInfor } from '../../../request/api.js';
	export default {
		data() {
			return {
				infor:""
			};
		},
		onShow() {
			this.getInfor()
		},
		methods:{
			async getInfor(){
				uni.showLoading({
					title:'加載中...'
				})
				let res=await getServiceInfor();
				uni.hideLoading()
				console.log(res);
				if(res.code==1){
					this.infor=res.data;
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			callPhone(){
				let that = this;
				uni.makePhoneCall({
					// 手机号
					phoneNumber: that.infor.service_phone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
						this.call_phone(); //重复调用一次
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FAFAFA;
		.code{
			width: 344rpx;height:344rpx;
			margin-top:30rpx;margin-left:auto;
			margin-right:auto;
			image{
				width: 344rpx;height:344rpx;
			}
		}
		.infor{
			width:702rpx;margin-left:auto;
			margin-right:auto;margin-top:26rpx;
			background-color: #ffffff;
			border-radius: 20rpx;box-sizing: border-box;
			padding:0 24rpx;
			box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(204,204,204,0.3);
			.title{
				font-size: 30rpx;color:#040404;height:90rpx;
				display: flex;align-items: center;
			}
			.one-infor{
				height:90rpx;display: flex;align-items: center;font-size: 26rpx;
				color:#040404;
				justify-content: space-between;border-top:1px solid #F0F0F0;
				.btn{
					width:136rpx;height:43rpx;background-color:#D71B0A;
					display: flex;align-items: center;justify-content: center;
					border-radius: 5rpx;font-size: 24rpx;color:#ffffff;
				}
			}
		}
	}
</style>
